<template>
    <div class="login">
        <div class="loginImg">
            <img src="../../assets/login.png" alt="">
        </div>

        <!-- 登录框 -->
        <div class="landing">
            <van-form @submit="onSubmit">
            <van-field
                v-model="username"
                name="username"
                label="用户名"
                placeholder="用户名"
                :rules="[{ required: true }]" 
            />
            <van-field
                v-model="password"
                type="password"
                name="password"
                label="密码"
                placeholder="密码"
                :rules="[{ required: true}]"
            />
            <p>忘记密码？</p>
            <div style="margin: 16px;">
                <van-button round block type="info" native-type="submit">登陆</van-button>
                <van-button round block type="info" >注册</van-button>
            </div>
            </van-form>
        </div>

        <!-- 第三方登陆 -->
        <p class="thirdParty">—————— 第三方登陆 ——————</p>
        <div class="icons">
            <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-weibo"></use>
            </svg>
            <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-weixin"></use>
            </svg>
            <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-QQ"></use>
            </svg>
        
        </div>

    </div>
    
</template>

<script>
import * as api from "../../api/login";
import storage from '../../utils/storage'
export default {
  data() {
    return {
      username: '',
      password: '',
    };
  },
  methods: {
    getLogin(username, password) {
      api.loginApi(username, password).then((res) => {
        // console.log(res)
        if (res.data.state) {
          this.$notify({ type: 'success', message: '登录成功' })
          storage.set('qf-token', res.data.token)
          storage.set('userInfo', res.data.userInfo)
          this.$router.push('/home')
        } else {
          this.$notify('登录失败')
          
        }
      })
    },
    //登录框提交时触发
    onSubmit(values) {
      this.getLogin(values.username, values.password)
    },
  },
};

</script>

<style scoped lang="less">  
    .icon {
       width: 1em; height: 1em;
       vertical-align: -0.15em;
       fill: currentColor;
       overflow: hidden;
    }
    #app{
        width: 100%;
        height:100%;
        .login{
            position: relative;
            .icons{
                height: 30px;
                width: 200px;
                position: absolute;
                left:94px;
                bottom: -340px;
                font-size: 30px;
                display: flex;
                justify-content: space-between;
            }
            .thirdParty{
                font-size: 12px;
                color:rgb(184, 175, 175);
                position: absolute;
                left:90px;
                bottom: -300px;
               
            }
            .loginImg{
                height: 422px;
                background-color: #459bf7 ;
                img{
                    width:390px;
                }
            }
            .landing{
                width: 290px;
                height: 320px;
                background-color: white;
                position: absolute;
                left:50px ;
                top:280px;
                border: 1px solid rgb(229, 221, 221);
                border-radius:20px;
                .van-form{
                    .van-cell{
                        border-radius: 20px;
                        margin-top: 6px;
                    }
                    p{
                        font-size: 14px;
                        text-align: right;
                        color:rgb(184, 175, 175);
                        margin-right: 20px;
                    }
                    .van-button{
                        margin-bottom: 20px;
                        border-radius: 10px;
                        height: 50px;
                    }
                    .van-button:nth-of-type(2){
                        background-color:white;
                        color:skyblue
                    }
                }
            }
        }
    }

</style>